import 'package:flutter/material.dart';

/* 
Container组件容器组件 类似html 的div
  属性说明：
  decoration (BoxDecoration修饰器)： 背景颜色、边框、圆角、阴影、线性渐变；
  alignment ：对齐方式
  margin ：外边距   例：EdgeInsets.all(20.0), .fromLTRB(0,0,0,0)
  padding ：内边距  例：padding:EdgeInsets.all(10.0)
  transform ：平移旋转  例：Matrix4.rotationZ(0.2)  Matrix4.translationValues(0,0,0)参数分别是xyz轴


Text组件详解
  textAlign   文本对齐方式（center居中，left左对齐，right右对齐，justfy两端对齐）
  textDirection 文本方向（ltr从左至右，rtl从右至左）
  overflow   文字超出屏幕之后的处理方式（clip裁剪，fade渐隐，ellipsis省略号）
  textScaleFactor   字体显示倍率
  maxLines  文字显示最大行数
  style   字体的样式设置

  TextStyle 的参数 ：
    decoration        文字装饰线（none没有线，lineThrough删除线，overline上划线，underline下划线）
    decorationColor   文字装饰线颜色
    decorationStyle   文字装饰线风格（[dashed,dotted]虚线，double两根线，solid一根实线，wavy波浪线）
    wordSpacing       单词间隙（如果是负值，会让单词变得更紧凑
    letterSpacing     字母间隙（如果是负值，会让字母变得更紧凑）
    fontStyle         文字样式（italic斜体，normal正常体）
    fontSize          文字大小
    color             文字颜色
    fontWeight        字体粗细（bold粗体，normal正常体）

*/

void main() {
  runApp(
      // 入口文件可以是自定义组件 也可以是flutter组件
      MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: Text('学习组件'),
        ),
        body: Column(
          children: [MyApp(), MyButton()],
        )),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        // color: Colors.blueGrey,
        // 如果设置渐变  color属性会失效
        gradient: LinearGradient(
          colors: [
            Colors.lightBlue,
            Colors.orange,
          ],
        ),
        border: Border.all(width: 2, color: Colors.black),
        borderRadius: BorderRadius.circular(10), // 参数是百分比  如果是100  那么就是一个圆
        boxShadow: const [
          //卡片阴影
          BoxShadow(
            color: Colors.blue,
            offset: Offset(2.0, 2.0),
            blurRadius: 10.0,
          )
        ],
      ), // 配置背景颜色 在 BoxDecoration 修饰器里
      margin: EdgeInsets.all(20),
      child: Text(
        'this is Container',
        style: TextStyle(
            fontSize: 18, color: const Color.fromARGB(255, 236, 226, 226)),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 50,
      alignment: Alignment.center,
      decoration: (BoxDecoration(
          color: Colors.lightBlueAccent,
          borderRadius: BorderRadius.circular(10))),
      child: Text(
        'button',
        textAlign: TextAlign.center,
        textDirection: TextDirection.ltr,
        style: TextStyle(
          color: Colors.white,
          fontSize: 18,
        ),
      ),
    );
  }
}
